<template>
  <!--style="width: calc(100% - 100px); height: calc(100% - 55px);"-->
  <!-- 弹出框 -->
  <a-modal
    :title="title"
    :visible="visible"
    width="90%"
    style="top: 20px;"
    destroyOnClose
    :bodyStyle ="bodyStyle"
    :footer="null"
    @cancel="handleModalCancel">
    <a-spin :spinning="confirmLoading">
      <a-tabs defaultActiveKey="1" tabPosition="left">

        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="file-text"/>
            <span>任务处理</span>
          </span>
          <br>
        <br>
        <template v-if="opt=='submit'">
          <biz-task-module ref="task" :formData="formData" @complete = "completeProcess">
            <div>
              <template v-if="isComp">
                <biz-dynamic-link ref="public" :path="path" :formData="formData"></biz-dynamic-link>
              </template>
              <template v-else>
                <iframe :src="iframeUrl" frameborder="0" width="100%" :height="height" scrolling="auto"></iframe>
              </template>
            </div>
          </biz-task-module>
        </template>
        <template v-else-if="opt=='reject'">
          <biz-task-reject-module ref="rejectTask" :formData="formData" @complete = "completeProcess"></biz-task-reject-module>
        </template>
        <br>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="sliders"/>
            <span>流程图</span>
          </span>
          <biz-process-module :formData="formData"></biz-process-module>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>

  import Vue from 'vue'
  import {httpAction} from '@/api/manage'
  import BizTaskModule from "./BizTaskModule.vue";
  import BizTaskRejectModule from "./BizTaskRejectModule.vue";
  import BizProcessModule from "../BizProcessModule.vue";
  import {ACCESS_TOKEN} from '@/store/mutation-types'
  import {isURL} from '@/utils/validate'
  import BizDynamicLink from "../BizDynamicLink.vue";

  export default {
    name: 'BpmBizTaskOptModal',
    components: {
      BizProcessModule,
      BizTaskRejectModule,
      BizTaskModule,
      BizDynamicLink
    },
    props: ['path','formData'],
    computed: {
      isComp: function () {
        var TOKEN = Vue.ls.get(ACCESS_TOKEN);
        var DOMAIN_URL = window._CONFIG['domianURL'];
        var TASKID = this.formData.taskDefKey;
        var URL = (this.path|| '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量
        console.log("isComp组件名称：",URL);
        if (isURL(URL)) {
          this.iframeUrl = URL;
          return false;
        }
        return true;
      }
    },
    data() {
      return {
        loading: false,
        title: "流程",
        visible: false,
        confirmLoading:false,
        bodyStyle:{
          padding: "0",
          "overflow-y":"auto"
        },
        iframeUrl:"",
        opt:"",
      }
    },
    created() {
    },
    methods: {
      // 关闭模态框
      handleModalCancel() {
        this.visible = false
      },
      deal(opt){
        this.opt = opt;
        this.visible = true;
        if(this.formData.extendUrlParams && this.formData.extendUrlParams.edit==1){
          this.formData['disabled'] = false
        }
      },
      completeProcess(e){
        const that = this
        const val = e
        if(this.opt=='submit'){
          if (this.$refs.public && this.$refs.public.$children &&
            this.$refs.public.$children[0].synSubmitForm && this.formData.extendUrlParams.edit == 1) {
            this.$refs.public.$children[0]
              .synSubmitForm()
              .then(() => {
                that.httpModel(val)
              })
              .catch(() => {
                console.log('error')
              })
          } else {
            that.httpModel(val)
          }
        }else{
          this.visible = false
          this.$emit('ok')
        }
      },
      httpModel(val) {
        const that = this

        that.$refs.task.showLoading()
        //先去掉上一个组件里的方法，成功回调后再调请求
        httpAction(val.url, val.model, 'post').then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$refs.task.hideLoading()
            this.visible = false
            this.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        })
      },
    }

  }
</script>

<style  lang="less" scoped>
  .ant-tabs-left-content{
    padding-top: 10px !important;
  }
</style>